<template>
  <div class="recommend">
    <Banner></Banner>
    <BorderTitle
      >推荐歌单<span
        ><router-link to="moreplaylist"
          >查看更多<img src="../assets/more.png" alt="" /></router-link></span
    ></BorderTitle>
    <ul class="recommendList">
      <ImgListItem
        v-for="item in recommendList"
        :key="item.id"
        :item="item"
      ></ImgListItem>
    </ul>
    <Loading v-if="recommendList.length == 0"></Loading>

    <BorderTitle>最新音乐</BorderTitle>
    <ul class="newestList">
      <NewestListItem
        @play="$emit('play', $event)"
        v-for="item in newestList"
        :key="item.id"
        :item="item"
      ></NewestListItem>
    </ul>
    <!-- <SongList :songs="newSongList"></SongList> -->

    <Loading v-if="recommendList.length == 0"></Loading>
    <BorderTitle>热门歌手</BorderTitle>
    <HotSinger></HotSinger>
  </div>
</template>

<script>
import BorderTitle from "@/components/BorderTitle.vue";
import ImgListItem from "@/components/ImgListItem.vue";
import NewestListItem from "@/components/NewestListItem.vue";
// import SongList from '@/components/SongList.vue'
import Loading from "@/components/Loading.vue";
import HotSinger from "@/components/HotSinger.vue";
import Banner from "@/components/Banner.vue";

export default {
  name: "Recommend",
  data() {
    return {
      recommendList: [],
      newestList: [],
      // newSongList:[]
    };
  },
  created() {
    this.$http.get("/personalized").then((d) => {
      this.recommendList = d.data.result.slice(0, 6);
      //   console.log(d);
    }),
      this.$http.get("/personalized/newsong").then((d) => {
        this.newestList = d.data.result.slice(0, 10);
        // console.log(this.newestList);
      });
  },
  components: {
    BorderTitle,
    ImgListItem,
    NewestListItem,
    // SongList
    Loading,
    HotSinger,
    Banner
  },
};
</script>
<style lang="less" scoped>
.recommend {
  padding-top: 15px;
  h5 {
    span {
      a {
        color: #999999;
        img {
          width: 19px;
          height: 19px;
          display: inline-block;
          vertical-align: -4.5px;
          margin-left: 5px;
        }
      }
    }
  }
  .recommendList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
</style>